<!-- SearchBar.vue -->
<template>
    <view class="search-container">
        <!-- 下拉选择器 -->
        <view class="selector-wrapper" v-if="selectorList && selectorList.length > 0">
            <picker mode="selector" :range="selectorList" :range-key="rangeKey" :value="selectedIndex"
                @change="onSelectorChange">
                <view class="selector">
                    <text class="selector-text">{{ displayText }}</text>
                    <text class="iconfont icon-arrow-down"></text>
                </view>
            </picker>
            <image  src="/static/version_4/Slice2.png" mode="scaleToFill" />
        </view>

        <!-- 搜索输入区域 -->
        <view class="search-input-wrapper" :class="{ 'with-selector': selectorList && selectorList.length > 0 }">
            <u-icon name="search" class="search-icon"></u-icon>
            <input class="search-input" :value="keyword" :placeholder="placeholder"
                :placeholder-style="placeholderStyle" @input="onInput" @focus="onFocus" @blur="onBlur"
                @confirm="onConfirm" :focus="autoFocus" confirm-type="search" />
            <!-- 清除按钮 -->
            <view v-if="showClear && keyword" class="clear-icon" @click="onClear">
                <u-icon name="close" class="icon-close"></u-icon>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

/**
 * 搜索组件
 * 包含下拉选择器和搜索输入框
 * 完整的事件支持：

 */

const props = defineProps({
    // 下拉选择器相关
    selectorList: {
        type: Array,
        default: () => []
    },
    rangeKey: {
        type: String,
        default: 'text'
    },
    selectorValue: {
        type: [String, Number],
        default: ''
    },
    selectorPlaceholder: {
        type: String,
        default: '请选择'
    },

    // 搜索框相关
    keyword: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请输入关键词搜索'
    },
    placeholderStyle: {
        type: String,
        default: 'color: #999; font-size: 14px;'
    },
    autoFocus: {
        type: Boolean,
        default: false
    },
    showClear: {
        type: Boolean,
        default: true
    },

    // 样式相关
    theme: {
        type: String,
        default: 'light', // 'light' | 'dark'
        validator: (value) => ['light', 'dark'].includes(value)
    },
    radius: {
        type: String,
        default: '24px'
    }
})


//  search：搜索确认事件
// selector-change：下拉选择变化
// focus/blur：输入框焦点事件
// clear：清除输入内容
// update:keyword：双向绑定关键词
// update:selectorValue：双向绑定选择器值
const emit = defineEmits([
    'update:keyword',
    'update:selectorValue',
    'search',
    'selector-change',
    'focus',
    'blur',
    'clear'
])

// 当前选中的索引
const selectedIndex = ref(0)

// 计算显示文本
const displayText = computed(() => {
    if (props.selectorList.length === 0) return ''

    if (props.selectorValue) {
        const item = props.selectorList.find(item => {
            if (props.rangeKey) {
                return item[props.rangeKey] === props.selectorValue
            }
            return item === props.selectorValue
        })

        if (item) {
            selectedIndex.value = props.selectorList.indexOf(item)
            return props.rangeKey ? item[props.rangeKey] : item
        }
    }

    return props.selectorPlaceholder
})

// 输入框输入事件
const onInput = (event) => {
    const value = event.detail.value
    emit('update:keyword', value)
}

// 输入框确认事件（点击键盘搜索/回车）
const onConfirm = (event) => {
    emit('search', event.detail.value)
}

// 输入框获得焦点
const onFocus = (event) => {
    emit('focus', event)
}

// 输入框失去焦点
const onBlur = (event) => {
    emit('blur', event)
}

// 下拉选择器变化
const onSelectorChange = (event) => {
    const index = event.detail.value
    selectedIndex.value = index

    const selectedItem = props.selectorList[index]
    let value = selectedItem

    if (props.rangeKey && selectedItem) {
        value = selectedItem[props.rangeKey]
    }

    emit('update:selectorValue', value)
    emit('selector-change', {
        index,
        item: selectedItem,
        value
    })
}

// 清除输入内容
const onClear = () => {
    emit('update:keyword', '')
    emit('clear')
}

// 监听selectorValue变化，更新selectedIndex
watch(() => props.selectorValue, (newVal) => {
    if (newVal && props.selectorList.length > 0) {
        const index = props.selectorList.findIndex(item => {
            if (props.rangeKey) {
                return item[props.rangeKey] === newVal
            }
            return item === newVal
        })
        if (index !== -1) {
            selectedIndex.value = index
        }
    }
}, { immediate: true })
</script>

<style scoped lang="scss">
.search-container {
    display: flex;
    align-items: center;
    width: 100%;
    background: #ffffff;
    border-radius: v-bind('props.radius');
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;

    // 深色主题
    &.theme-dark {
        background: #2c3e50;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        &.theme-dark {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
    }
}

// 选择器样式
.selector-wrapper {
    position: relative;
    min-width: 100px;
    max-width: 120px;
    padding: 0 12px;
    border-right: 1px solid #eee;
    cursor: pointer;

    .theme-dark & {
        border-right-color: #4a5568;
    }

    &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 20px;
        background: #eee;

        .theme-dark & {
            background: #4a5568;
        }
    }

    image{
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 1px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    width: 100%;
}

.selector-text {
    font-size: 14px;
    color: #333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .theme-dark & {
        color: #e2e8f0;
    }
}

.icon-arrow-down {
    margin-left: 6px;
    font-size: 12px;
    color: #999;

    .theme-dark & {
        color: #a0aec0;
    }
}

// 搜索输入区域
.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: relative;

    &.with-selector {
        padding-left: 12px;
    }
}

.search-icon {
    font-size: 16px;
    color: #999;
    margin-right: 8px;
    flex-shrink: 0;

    .theme-dark & {
        color: #a0aec0;
    }
}

.search-input {
    flex: 1;
    height: 48px;
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    outline: none;

    .theme-dark & {
        color: #e2e8f0;

        &::placeholder {
            color: #a0aec0;
        }
    }

    &::placeholder {
        color: #999;
        font-size: 14px;
    }
}

.clear-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #e4e6eb;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    transition: all 0.2s ease;

    .theme-dark & {
        background: #4a5568;
    }

    &:active {
        transform: scale(0.9);
    }

    .icon-close {
        font-size: 12px;
        color: #999;

        .theme-dark & {
            color: #a0aec0;
        }
    }
}

// 响应式设计
@media (max-width: 375px) {
    .selector-wrapper {
        min-width: 80px;
        max-width: 100px;
        padding: 0 8px;
    }

    .search-input-wrapper {
        padding: 0 12px;

        &.with-selector {
            padding-left: 8px;
        }
    }

    .search-input {
        font-size: 13px;

        &::placeholder {
            font-size: 13px;
        }
    }
}
</style>